<template>
    <nav-bar tittle="TOP 100" :isBack="true"></nav-bar>
    <ul>
        <li class="moves" v-for="item in hotmsgs" :key="item.id" @click="detail(item.id)">
            <div class="pics"> <img :src="item.poster" alt=""></div>
            <section>{{ item.title }}&nbsp;{{ item.title_original }}<span></span>
                <div>{{ item.year }}</div>
                <div>{{ item.genres }}</div>
                <div>{{ item.countries }}</div>
            </section>
        </li>
    </ul>
</template>
<script>
import axios from 'axios';
import { hightmove } from '../../api/all/index'

export default {
    data() {
        return {
            hotmsgs: [],
        }
    },
    created() {
        hightmove('https://test-h5-api.ixook.com/movie/top').then(res => {
            console.log(res);
            // console.log(res.data.data);
            this.hotmsgs = res.data.data
        })

    },
    methods: {
        detail(id) {
            this.$router.push(`/detailmove?id=${id}`)
        }
    }

}
</script>

<style lang="scss" scoped>
ul {
    background-color: #fff;

    .moves {
        width: 345px;
        height: 126px;
        display: flex;
        // float: left;
        margin: auto;
        margin: 0 0.4rem;
        padding: 0.21333333rem 0;
        border-bottom: 1px solid #ccc;


        .pics {


            img {
                width: 82px;
                height: 110px;
            }
        }

        section {
            flex: 1;
            margin-left: 10px;

            div {
                font-size: 0.32rem;
                color: #999;
            }
        }

        // float: left;

    }
}
</style>